<template>
	<view class="couponList">
		<!-- tab栏 -->
		<view class="tab_box flex-r-a-c">
			<view class="tab_item" :class="item.tabIndex == tabCurrent ? 'active' : ''" v-for="(item,index) in tabList"
				:key="index" :data-tabCurrent="item.tabIndex" @tap="tabChange">
				{{item.tabIndex == 1 ? item.name + `(${quantity})` : item.name }} 
			</view>
		</view>
		<!-- 优惠券列表 -->
		<view class="list" style="background-image: url(https://yft.yangfatang.cn/upload/bg/bg3.png);" 
		v-for="(item,index) in couponList" :key="index">
			<view class="list_l flex-r-c-c">
				<view class="money">¥<text>{{item.price}}</text></view>
				<view class="condition">
					<view class="type one-line-ellipsis">{{item.title}}</view>
					<view class="text one-line-ellipsis">{{item.intro}}</view>
				</view>
			</view>
			<view class="list_f">
				<view class="btn" v-if="item.status == 0" @tap="goShop">去使用</view>
				<view class="btns" v-if="item.status == 1">已使用</view>
				<view class="time" v-if="item.status == 0">有效期：{{item.endtime}}</view>
			</view>
		</view>
		
		<view class="text" style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold;">{{titleText}}</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quantity: 0, // 未使用优惠券的数量
				tabCurrent: 1, // tab 下标
				tabList: [{ // tab 栏
					name: '未使用',
					tabIndex: 1
				},{
					name: '已使用',
					tabIndex: 2
				}],
				couponList: [] , // 优惠券列表
				titleText: '' ,
				page: 1, // 页码
			};
		},
		onLoad() {
			this.getCouponList()  // 获取优惠券列表
		},
		onReachBottom() {
			let that = this
			if(that.titleText == ''){ // 防止上拉多次请求
				that.page = that.page+1
				that.getCouponList()
			}
		},
		methods:{
			// tab 切换
			tabChange(e){
				this.page = 1
				this.couponList = []
				this.tabCurrent = e.currentTarget.dataset.tabcurrent
				this.getCouponList()
			},
			// 获取优惠券列表
			getCouponList(){
				let that = this
				let data = {
					page: that.page,
					type: that.tabCurrent
				}
				that.$api.coupon_list(data).then(res => {
					console.log(res)
					if(that.tabCurrent == 1){
						that.quantity = res.data.data.total
					}
					that.titleText = res.data.data.data.length == 0 ? '暂无数据' : ''
					that.couponList = that.couponList.concat(res.data.data.data)
				})
			},
			// 跳转到服务
			goShop(){
				uni.navigateTo({
					url: '/pages/tabBar/service/service'
				})
			}
		}
	}
</script>

<style lang="less">
	.couponList{
		
		.tab_box {
			width: 100vw;
			height: 102rpx;
			background-color: #FFFFFF;
		
			.tab_item {
				width: 50%;
				height: 100%;
				line-height: 102rpx;
				text-align: center;
				font-size: 28rpx;
				color: #7B7B7B;
				font-weight: 500;
				position: relative;
			}
		
			.active {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
		
				&::after {
					width: 130rpx;
					height: 8rpx;
					content: ' ';
					background-color: #45806E;
					border-radius: 4rpx;
					position: absolute;
					top: 95rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
		
		.list{
			width: 95vw;
			height: 160rpx;
			margin: 40rpx auto;
			background-size: 100% 100%;
			position: relative;
			
			.list_l{
				width: 57%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				.money{
					width: 50%;
					color: #C48A46;
					font-size: 28rpx;
					font-weight: 500;
					text-align: center;
					text{
						display: inline-block;
						font-size: 68rpx;
						margin-left: 8rpx;
					}
				}
				.condition{
					width: 50%;
					.type{
						font-weight: 500;
						font-size: 32rpx;
						color: #505050;
					}
					.text{
						font-size: 24rpx;
						color: #8E8E8E;
						font-weight: 500;
					}
				}
			}
			
			.list_f{
				width: 40%;
				height: 100%;
				flex-wrap: wrap;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				.btn{
					width: 192rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					margin: 20rpx auto;
					margin-top: 30rpx;
					background: linear-gradient(157deg, #EBCB8A 0%, #E8BE6C 100%);
					border-radius: 30rpx;
					color: #916724;
					font-size: 28rpx;
					font-weight: bold;
				}
				.time{
					width: 100%;
					font-size: 20rpx;
					font-weight: 500;
					text-align: center;
					color: #8E8E8E;
				}
				.btns{
					width: 192rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 30rpx;
					color: #999999;
					background-color: #F5F5F5;
					margin: 50rpx auto;
				}
			}
		}
		//
	}
</style>
